<template>
  <div>
    <a-form :model="formState" ref="smsForm" v-bind="formItemLayout">
      <a-form-item name="serviceName" label="开启短信">
        <a-switch v-model:checked="formState.enable" checked-children="开启" un-checked-children="关闭" />
      </a-form-item>
      <a-form-item name="encryption" label="手机号加密">
        <a-switch v-model:checked="formState.encryption" checked-children="是" un-checked-children="否" />
      </a-form-item>
      <a-form-item name="smsCodeHander" label="验证码处理器">
        <a-input v-model:value="formState.smsCodeHander" />
      </a-form-item>
      <a-form-item name="sendSmsConfig" label="发送配置">
        <a-select v-model:value="formState.sendSmsConfig" placeholder="请选择发送配置">
          <a-select-option value="FeiGeSmsUtils">飞鸽短信</a-select-option>
          <a-select-option value="JpushSMSUtils">极光短信</a-select-option>
          <a-select-option value="AliYunSMSUtils">阿里云短信</a-select-option>
          <a-select-option value="ManDaoSmsUtils">漫道科技短信</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab2" setup>
import { onMounted, ref } from 'vue';
import { configSave, getConfig } from '../data/config.api';

const ossForm = ref();
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 10 },
};
const formState = ref({
  configKey: 'DEREN_SMS_CONFIG',
  enable: false,
  encryption: false,
  smsCodeHander: '',
  sendSmsConfig: '',
});

onMounted(() => {
  setData();
});

/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getConfig({
    configType: 'derensms',
  }).then(data => {
    formState.value = JSON.parse(data.DEREN_SMS_CONFIG);
    console.log(formState);
  });
}

/**
 * 表单提交
 */
async function handleSubmit() {
  let data = {
    configKey: '',
    configVal: '',
  };
  data.configKey = 'DEREN_SMS_CONFIG';
  data.configVal = JSON.stringify(formState.value);
  configSave(data).then(() => {});
}
</script>
